<template>
  <div class="top">
    <div class="tab_btn">
      <van-badge
        position="top-right"
        v-for="(item, index) in tabData"
        :key="index"
        :content="item.badge"
        :offset="[-10, 5]"
      >
        <div
          class="tab_btn_item"
          @click="doChecked(index)"
          :class="[index == checkIndex ? 'checked' : '']"
        >
          {{ item.text }}
        </div>
      </van-badge>
    </div>
    <div class="screen">
      <img class="screenImg" src="@img/sh.png" alt="" />
    </div>
  </div>
</template>
<script>
import { createApp } from "vue";
import { Picker } from "vant";
import { showToast } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
export default {
  data() {
    return {
      tabData: [
        {
          text: "全部",
          badge: null,
        },
        {
          text: "关注",
          badge: null,
        },
        {
          text: "等我回答",
          badge: 1,
        },
      ],
      option1: [
        { text: "筛选", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      value1: 0,
      checkIndex: 0,
    };
  },
  methods: {
    changeShow() {
      if (this.isShow == true) {
        this.isShow = false;
      } else if (this.isShow == false) {
        this.isShow = true;
      }
    },

    doChecked(index) {
      this.checkIndex = index;
    },

    onCancel() {
      this.isShow = false;
    },
  },
  setup() {
    const columns = [
      { text: "杭州", value: "Hangzhou" },
      { text: "宁波", value: "Ningbo" },
      { text: "温州", value: "Wenzhou" },
      { text: "绍兴", value: "Shaoxing" },
      { text: "湖州", value: "Huzhou" },
    ];
    const onConfirm = ({ selectedValues }) => {
      showToast(`当前值: ${selectedValues.join(",")}`);
    };
    const onChange = ({ selectedValues }) => {
      showToast(`当前值: ${selectedValues.join(",")}`);
    };

    return {
      columns,
      onChange,
      onConfirm,
    };
  },
};
</script>
<style scoped lang="scss">
.top {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
 
}
.tab_btn_item {
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  display: inline-block;
  padding: 5px 21px;
  border-radius: 15px;
  margin-right: 12px;
  font-size: 12px;
  background: #e3e3e3;
  color: #676b6b;
  border: 1px solid #ffffff;
}
.checked {
  background-color: #00c37d;
  color: #ffffff;
}
.van-dropdown-menu__title {
  font-size: 14px;
  line-height: 30px;
  font-family: PingFangSC-Regular;
}
.screenImg {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.screen_img {
  padding: 3px 0;
}
.van-dropdown-menu__bar {
  box-shadow: none;
  height: 30px;
}
</style>
